<template>
  <view>
    <view
      style="
        background: #fff0c3;
        border-radius: 16rpx;
        display: flex;
        margin: 20rpx 24rpx 0 24rpx;
        padding: 23rpx;
      ">
      <image
        src="https://static.tospurfang.com/asset/warning.png"
        mode="scaleToFill"
        style="width: 32rpx; height: 32rpx" />
      <view style="flex: 1; font-size: 24rpx; color: #907c3a; margin-left: 15rpx">
        <view style="font-weight: 600">资产提交说明</view>
        <view>
          动动手指，就有机会创收！录入可售大宗资产信息，2个工作日内，我们将火速审核上架资产，并持续匹配客源。大家联手，一起资源变现🤝
        </view>
      </view>
    </view>
    <view style="background: #ffffff; border-radius: 16rpx; padding: 0 23rpx; margin: 20rpx 24rpx">
      <template v-for="item in options" :key="item.key">
        <view v-if="!item.hide" class="dt-flex-1">
          <edit-item ref="editRef" v-model="info" :option="item" />
        </view>
      </template>
    </view>
    <view
      @click="onSumbit"
      style="
        width: 702rpx;
        height: 100rpx;
        background: #042275;
        border-radius: 16rpx;
        margin: 24rpx;
        font-size: 32rpx;
        color: #ffffff;
        text-align: center;
        line-height: 100rpx;
      ">
      提交
    </view>
    <view style="height: 100rpx"></view>
  </view>
  <city-modal ref="cityRef" showArea @ok="onArea" />
  <tip-modal ref="tipRef"></tip-modal>
</template>
<script setup>
  import cityModal from '@/com/city-modal.vue'
  import editItem from '@/com/editItem.vue'
  import tipModal from '@/com/tip-modal.vue'
  import { onLoad } from '@dcloudio/uni-app'

  import dt from '@dt/dt'
  import { reactive, ref, watch } from 'vue'
  import mgr from './biz'

  const info = ref({
    hasUnitPrice: true,
    unitPriceTip: '如暂无报价，请输入价格说明',
    hasTotalPrice: true,
    totalPriceTip: '如暂无报价，请输入价格说明'
  })
  const [editRef, cityRef, tipRef] = [ref(), ref(), ref()]

  onLoad(() => {
    uni.$once('assetInfo', (res) => {
      Object.assign(info.value, res)
    })
    uni.$emit('getAssetInfo')
  })

  function onSumbit() {
    if (!editRef.value.some((item) => !item.checkRequired())) {
      mgr.create(info.value).then(
        (res) => {
          tipRef.value.show({
            success: true,
            title: '提交成功',
            content: '请等待后台工作人员审核',
            ok: () => {
              uni.navigateBack()
            }
          })
        },
        (err) => {
          if (err.code == 50005) {
            tipRef.value.show({ success: false, title: '提交失败', content: '该资产已存在' })
          } else {
            uni.showToast({ icon: 'none', title: err.message })
          }
        }
      )
    }
  }

  function onArea(res) {
    info.value.areaName = `${res.city.cityName}-${res.area.cityName}`
    info.value.areaId = res.area.cityCode
    cityRef.value.hide()
  }

  watch(
    () => info.value.propertyType,
    (n) => {
      coverArea.hide = n != 'industrialPark'
      if (coverArea.hide) info.value.coverArea = null
      plotRatio.hide = n != 'industrialPark'
      if (plotRatio.hide) info.value.plotRatio = null
      salesUnit.hide = n == 'industrialPark'
      if (salesUnit.hide) info.value.salesUnit = null
      roomCount.hide = n != 'hotel'
      if (roomCount.hide) info.value.roomCount = null
      brandOperator.hide = n != 'hotel'
      if (brandOperator.hide) info.value.brandOperator = null
      isGas.hide = n != 'LOFT apartment' && n != 'flatApartment'
      if (isGas.hide) info.value.isGas = null
      decorationDegree.hide = n != 'LOFT apartment' && n != 'flatApartment'
      if (decorationDegree.hide) info.value.decorationDegree = null
    }
  )

  watch(
    () => info.value.hasUnitPrice,
    (n) => {
      if (n) {
        unitPriceOpt[0].hide = false
        unitPriceOpt[2].hide = true
        unitPriceOpt[1].required = false
      } else {
        info.value.unitPrice = 0
        unitPriceOpt[0].hide = true
        unitPriceOpt[2].hide = false
        unitPriceOpt[1].required = true
      }
    }
  )

  watch(
    () => info.value.hasTotalPrice,
    (n) => {
      if (n) {
        totalPriceOpt[0].hide = false
        totalPriceOpt[2].hide = true
        totalPriceOpt[1].required = false
      } else {
        info.value.totalPrice = 0
        totalPriceOpt[0].hide = true
        totalPriceOpt[2].hide = false
        totalPriceOpt[1].required = true
      }
    }
  )

  const coverArea = reactive({
    key: 'coverArea',
    title: '占地面积(万㎡)',
    placeholder: '请输入占地面积',
    input: 'digit',
    type: 'input',
    required: true,
    hide: true
  })

  const plotRatio = reactive({
    key: 'plotRatio',
    title: '容积率',
    placeholder: '请输入容积率',
    input: 'digit',
    type: 'input',
    required: true,
    hide: true,
    blur: () => {
      if (info.value.plotRatio) info.value.plotRatio = Number(info.value.plotRatio).toFixed(2)
    }
  })

  const salesUnit = reactive({
    key: 'salesUnit',
    title: '销售单位',
    placeholder: '请选择销售单位',
    type: 'select',
    dropList: dt.dictInfo().salesUnit,
    required: true,
    hide: true
  })

  const roomCount = reactive({
    key: 'roomCount',
    title: '房间数量(个)',
    placeholder: '请输入房间数量',
    input: 'digit',
    type: 'input',
    required: true,
    hide: true
  })

  const brandOperator = reactive({
    key: 'brandOperator',
    title: '品牌运营方',
    placeholder: '请输入品牌运营方',
    type: 'input',
    required: true,
    max: 20,
    hide: true
  })

  const isGas = reactive({
    key: 'isGas',
    title: '有无燃气',
    placeholder: '请选择有无燃气',
    type: 'select',
    required: true,
    dropList: [
      { key: true, value: '有燃气' },
      { key: false, value: '无燃气' }
    ],
    hide: true
  })

  const decorationDegree = reactive({
    key: 'decorationDegree',
    title: '装修程度',
    placeholder: '请选择装修程度',
    type: 'select',
    dropList: dt.dictInfo().decorationDegree,
    required: true,
    hide: true
  })

  const unitPriceOpt = reactive([
    {
      key: 'unitPrice',
      title: '单价(万元/㎡)',
      placeholder: '请输入单价',
      input: 'digit',
      type: 'input',
      required: true,
      hide: false
    },
    {
      key: 'unitPriceExplanation',
      title: '价格说明',
      placeholder: '请输入价格说明',
      type: 'input',
      max: 50,
      required: false,
      hide: false
    },
    {
      key: 'unitPriceTip',
      title: '',
      type: 'text',
      required: false,
      hide: true,
      showImg: true,
      style: 'color:#907C3A;background-color:#FFF0C3;text-align:left;padding-left:10rpx'
    }
  ])

  const totalPriceOpt = reactive([
    {
      key: 'totalPrice',
      title: '项目总价(万元)',
      input: 'digit',
      placeholder: '请输入项目总价',
      type: 'input',
      required: true,
      hide: false
    },
    {
      key: 'totalPriceExplanation',
      title: '价格说明',
      placeholder: '请输入价格说明',
      type: 'input',
      max: 50,
      required: false,
      hide: false
    },
    {
      key: 'totalPriceTip',
      title: '',
      type: 'text',
      required: false,
      hide: true,
      showImg: true,
      style: 'color:#907C3A;background-color:#FFF0C3;text-align:left;padding-left:10rpx'
    }
  ])

  const options = reactive([
    {
      key: 'propertyName',
      title: '资产名称',
      type: 'input',
      placeholder: '请输入资产名称',
      max: 20,
      required: true
    },
    {
      key: 'propertyType',
      title: '物业类型',
      placeholder: '请选择物业类型',
      type: 'select',
      dropList: dt.dictInfo().propertyType,
      required: true
    },
    {
      key: 'areaName',
      title: '所在区域',
      placeholder: '请选择所在区域',
      type: 'event',
      required: true,
      click: () => {
        cityRef.value.show()
      }
    },
    coverArea,
    plotRatio,
    {
      key: 'totalArea',
      title: '面积(万㎡)',
      placeholder: '请输入面积',
      input: 'digit',
      type: 'input',
      required: true
    },
    {
      key: 'hasUnitPrice',
      title: '是否已有单价',
      placeholder: '请选择',
      type: 'select',
      dropList: [
        {
          key: true,
          value: '已有单价'
        },
        {
          key: false,
          value: '暂无单价'
        }
      ],
      required: true
    },
    ...unitPriceOpt,
    {
      key: 'hasTotalPrice',
      title: '是否已有总价',
      placeholder: '请选择',
      type: 'select',
      dropList: [
        {
          key: true,
          value: '已有总价'
        },
        {
          key: false,
          value: '暂无总价'
        }
      ],
      required: true
    },
    ...totalPriceOpt,
    salesUnit,
    roomCount,
    brandOperator,
    isGas,
    decorationDegree,
    {
      key: 'highlights',
      title: '资产亮点',
      placeholder: '请输入资产亮点',
      type: 'textarea',
      max: 200,
      required: true
    },
    {
      key: 'pictures',
      title: '资产照片',
      tip: '建议上传产权证明、外景照、内景照、周边建面图、楼层平面图、户型平面图等',
      type: 'image',
      urlKey: 'attachAddress',
      nameKey: 'fileName',
      max: 20,
      required: true
    }
  ])
</script>
<style lang="scss" scoped></style>
